<template>
    <div v-if="open" class="dark_mark">
        <div class="popup" @click="closePopup">
            <div @click.stop="" class="popup-content" :class="{ open: popupOptions.show }">
                <div class="popup-content-title">
                    <span>{{ title }}</span>
                    <div @click="closePopup" class="popup-content-title-close">+</div>
                </div>
                <div class="popup-content-inner">
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, nextTick, watch } from "vue";

defineOptions({ name: "PopUp" })

export interface IPopupProps {
    /** 组件是否打开 */
    open: boolean;
    /** 标题 */
    title?: string;
}

const popupOptions = reactive({
    show: false
})

const emits = defineEmits(["update:open"]);

const props = withDefaults(defineProps<IPopupProps>(), {
    open: false,
    title: ""
});

watch(() => props.open, (__open__: boolean) => {
    if (__open__) {
        nextTick(() => {
            setTimeout(() => {
                popupOptions.show = true;
            }, 200);
        });
    }
})

const closePopup = () => {
    popupOptions.show = false;
    setTimeout(() => {
        emits("update:open", false);
    }, 350);
}
</script>


<style lang="less" scoped>
@import "./index.less";
</style>